<template>
  <div class="message">
    <div class="header">
      <div class="tou"></div>
      <span>会员信息查询</span>
    </div>
    <el-form label-width="80px" size="mini" style="margin: 20px 0 0 0">
      <div style="display: flex">
        <el-form-item label="手机号" class="qq" prop="phone">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="formLabelAlign.phone"
            maxlength="11"
          ></el-input>
        </el-form-item>

        <el-form-item label="卡号" class="qq">
          <el-input
            v-model="formLabelAlign.cardid"
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
          >
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="会员编号" class="qq" prop="phone">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="formLabelAlign.customerId"
            maxlength="11"
          >
          </el-input>
        </el-form-item> -->
        <el-form-item label="证件号" class="qq">
          <el-input
            v-model="formLabelAlign.certificateNo"
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
          >
          </el-input>
        </el-form-item>
      </div>
      <div style="margin: 10px 0 0 30%">
        <el-form-item>
          <el-button size="mini" @click="getqueryCRMCustomerData" type="warning"
            >查询会员</el-button
          >
          <el-button
            size="mini"
            @click="getregistermethod"
            type="primary"
            style="font-weight: bold"
            >&nbsp;&nbsp; 注册 &nbsp;&nbsp;</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-row class="el-row">
      <div class="el-switch"></div>
    </el-row>
    <div class="zhongjain"></div>

    <div class="zhongjain1">
      <div class="tou"></div>
      <span style="font-weight: bold">会员信息</span>
    </div>
    <!-- 下方表格数据 -->
    <div class="box" style="margin: 0 0 20px 20px">
      <div class="box1" style="width: 9%">
        <div class="box1-1">会员信息</div>
        <div class="box1-2">
          <p class="lan1" @click="frequency">高频用户</p>
          <p class="hui">会员姓名</p>
          <p class="lan1" style="cursor: pointer" @click="gocustormember">
            {{ queryList.userName ? queryList.userName : '暂无姓名'}}
          </p>
          <p class="hui">会员编码</p>
          <p class="lan1">{{ this.queryList.customerId }}</p>
          <p
            class="lan1"
            style="margin: 10px 0 0 0"
            @click="cardrefundinformation"
          >
            查询退卡信息
          </p>
          <!-- <p class="hui">查询退卡信息</p>
          <p class="hui">查询退费信息</p> -->
        </div>
      </div>
      <div class="box2">
        <div class="box2-1"></div>
      </div>
      <div class="box1" style="width: 7.5%">
        <!-- <div class="box1-1">卡信息</div> -->
        <div class="box1-1">vip经理</div>
        <div class="box1-2">
          <p class="hui">部门名称</p>
          <p class="hei">{{ queryList.deptName }}</p>
          <p class="hui">分配状态</p>
          <p class="hei">{{ queryList.vipstatus }}</p>
          <p class="hui">VIP经理名称</p>
          <p class="hei">{{ queryList.employeeName }}</p>
        </div>
      </div>
      <div class="box2">
        <div class="box2-1"></div>
      </div>
      <div class="box1" style="width: 14%">
        <div class="box1-1">卡信息</div>
        <!-- <div v-if="expiredCardDataList.length == 0"> -->
        <div class="box1-2" v-for="(item, index) in cardDataList" :key="index">
          <p class="hui">{{ item.cardName }}</p>
          <el-tooltip content="Bottom center" placement="bottom" effect="light">
            <div slot="content">
              <div>卡号:{{ item.cardNumber }}</div>
              <div>购买时间:{{ item.openCardTime }}</div>
              <div>未执行次数:{{ item.stayExecuteCount==null?'0': item.stayExecuteCount }}</div>
              <div>含待执行过期时间:{{ item.expireTime }}</div>
            </div>
            <p class="lan1">{{ item.cardNumber }}</p>
          </el-tooltip>
        </div>
      </div>
      <!-- <div v-if="expiredCardDataList.length != 0">
          <div
            class="box1-2"
            v-for="(item, index) in expiredCardDataList"
            :key="index"
          >
            <el-tooltip
              content="Bottom center"
              placement="bottom"
              effect="light"
            >
              <div slot="content">
                <div>卡号:{{ item.cardNum }}</div>
                <div>购买时间:{{ item.purchaseDate }}</div>
                <div>过期时间:{{ item.invalidDate }}</div>
            
              </div>
              <span class="hui">{{ item.cardName }}</span>
            </el-tooltip>
            <span class="yiguoqi">已过期</span>
          </div>
        </div>
      </div> -->
      <div class="box2">
        <div class="box2-1"></div>
      </div>
      <div class="box1" style="width: 13%">
        <div class="box1-1">会员资产</div>
        <div class="box1-2">
          <p class="hui">
            积分 &nbsp;<span class="lan1" @click="integralSubsidiary">{{
              queryList.integralSum ? queryList.integralSum : 0
            }}</span>
          </p>
          <!-- <p class="hui">出门抵扣卷 &nbsp;<span class="lan1">111</span></p> -->
          <!-- <p class="hui">Plus抵扣权益包 &nbsp;<span class="lan1">无</span></p> -->
          <p class="hui">
            旅游抵扣卷 &nbsp;<span class="lan1"
              >￥{{ queryList.travelMoney }}</span
            >
          </p>
          <p class="hui">
            优惠卷 &nbsp;<span class="lan1" @click="coupons">{{
              userCouponBOSLength
            }}</span>
          </p>
          <!-- <p class="hui">值机次数 &nbsp;<span class="lan1">11</span></p> -->
          <p class="hui">
            商品抵扣卷 &nbsp;<span class="lan1"
              >￥{{ queryList.commodityMoney }}</span
            >
          </p>
          <!-- <p class="hui">Plus代金卷 &nbsp;<span class="lan1">无</span></p>
          <p class="hui">快乐飞 &nbsp;<span class="lan1">0张</span></p> -->
        </div>
      </div>
      <div class="box2">
        <div class="box2-1"></div>
      </div>
      <div class="box1" style="width: 25%">
        <div class="box1-1">出行/健康产品</div>
        <div class="box1-2">
          <p class="hui">
            景区门票 &nbsp;<span class="lan1">{{
              queryList.admissionTicketNum
            }}</span>
          </p>
          <!-- <p class="hui">旅游 &nbsp;<span class="lan1">0</span></p> -->
          <p class="hui">
            体检 &nbsp;<span
              class="lan1"
              style="cursor: pointer"
              @click="gophysicalExamination"
              >{{ queryList.testNum }}</span
            >&nbsp;
          </p>
          <p class="hui">
            挂号&nbsp;<span class="lan1">{{ queryList.registerNum }}</span
            >&nbsp;
          </p>
          <p class="hui">
            在线问诊 &nbsp;<span class="lan1">{{
              queryList.consultationNum
            }}</span
            >&nbsp;
          </p>
          <p class="hui">
            私人医生 &nbsp;<span class="lan1">{{ queryList.doctorNum }}</span
            >&nbsp;
          </p>
        </div>
      </div>
      <div class="box2">
        <div class="box2-1"></div>
      </div>
      <div class="box1" style="width: 13%">
        <div class="box1-1">零钱</div>
        <div class="box1-2">
          <p class="hui">零钱总余额</p>
          <p class="lan1">￥{{ queryList.money + queryList.species }}</p>
          <p class="hui">可提现零钱</p>
          <p class="lan1">￥{{ queryList.money }}</p>
          <p class="hui">不可提现零钱</p>
          <p class="lan1">￥{{ queryList.species }}</p>
          <p class="hui">冻结零钱</p>
          <!-- <p class="lan1">￥{{ queryList.frozenDeposit }}</p> -->
        </div>
      </div>
      <div class="box2">
        <div class="box2-1"></div>
      </div>
      <div class="box1" style="width: 13%">
        <div class="box1-1">会员权益使用</div>
        <div class="box1-2">
          <p class="hui">
            商品抵扣卷 &nbsp;<span class="lan1"
              >￥{{ queryList.useCommodityMoney ? useCommodityMoney : 0 }}</span
            >
          </p>
          <p class="hui">
            贵宾厅 &nbsp;<span @click="hallorder" class="lan1">{{
              queryList.useVIPHallNum
            }}</span>
          </p>
          <p class="hui">
            值机订单 &nbsp;<span @click="checkinorder" class="lan1">{{
              queryList.useVIPBoardingNum
            }}</span>
          </p>
          <p class="hui">
            vip通道 &nbsp;<span @click="viporder" class="lan1">{{
              queryList.useVIPChannelNum
            }}</span>
          </p>
          <p class="hui">
            机票订单 &nbsp;<span @click="fightorder" class="lan1">{{
              queryList.useFlightNum
            }}</span>
          </p>
          <p class="hui">
            酒店订单 &nbsp;<span @click="hotelorder" class="lan1">{{
              queryList.useHotelNum
            }}</span>
          </p>
          <p class="hui">
            火车票订单 &nbsp;<span @click="trainOrder" class="lan1">{{
              queryList.useTrainNum
            }}</span>
          </p>
        </div>
      </div>
      <div class="box2">
        <div class="box2-1"></div>
      </div>
      <div class="box1" style="width: 7%">
        <div class="box1-1">操作</div>
        <div class="box1-2">
          <p @click="goPayCard" class="a">购卡</p>

          <p @click="goRefundCard" class="a">退卡</p>

          <!-- <p @click="goCirculation" class="a">工单流转</p>
          <p class="a" @click="goRegister">预定分析</p> -->
        </div>
      </div>
    </div>
    <!-- 注册会员弹窗 -->
    <el-dialog
      title="注册会员"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        size="mini"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="110px"
      >
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="姓名" prop="userName">
            <el-input
              style="width: 150px"
              v-model="ruleForm.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneOne">
            <el-input
              style="width: 150px"
              v-model="ruleForm.phoneOne"
            ></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="certificateType">
            <el-select
              style="width: 150px"
              v-model="ruleForm.certificateType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in mold"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="证件号" prop="certificateNumber">
            <el-input
              style="width: 150px"
              v-model="ruleForm.certificateNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="证件有效期">
            <el-date-picker
              size="mini"
              style="width: 150px"
              v-model="ruleForm.certificateDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
             <el-form-item label="生日" prop="birthday">
            <el-date-picker
              size="mini"
              style="width: 150px"
              v-model="ruleForm.birthday"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="微信">
            <el-input
              style="width: 150px"
              v-model="ruleForm.userWechat"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="userSex">
            <el-select
              style="width: 150px"
              v-model="ruleForm.userSex"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
            </el-select>
          </el-form-item>
         
  <el-form-item label="邮箱" prop="userEmail">
            <el-input
              style="width: 150px"
              v-model="ruleForm.userEmail"
            ></el-input>
          </el-form-item>







        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="常住地">
            <el-input
              style="width: 480px"
              v-model="ruleForm.residence"
            ></el-input>
          </el-form-item>
        </div>

        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="备注">
            <el-input style="width: 480px" v-model="ruleForm.remark"></el-input>
          </el-form-item>
        </div>

        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="联系要求">
            <el-input
              style="width: 480px"
              v-model="ruleForm.requirement"
            ></el-input>
          </el-form-item>
        </div>
    
        <!-- <div style="display: flex; margin: 0 0 15px 0"> -->
        <!-- <el-form-item
            label="姓名"
            prop="customerName"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.customerName"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="contractPhoneOne"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.contractPhoneOne"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="证件类型"
            prop="idType"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.idType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in mold"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="证件号"
            prop="custCertificateNo"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.custCertificateNo"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="性别"
            prop="customerSex"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.customerSex"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="生日"
            prop="birthday"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-date-picker
              size="mini"
              style="width: 120px"
              v-model="ruleForm.birthday"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="证件有效期"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-date-picker
              size="mini"
              style="width: 120px"
              v-model="ruleForm.expired"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="职业" style="display: flex; margin: 0 15px 0 0">
            <el-input
              style="width: 120px"
              v-model="ruleForm.profession"
            ></el-input>
          </el-form-item>
          <el-form-item label="职务" style="display: flex; margin: 0 15px 0 0">
            <el-input
              style="width: 120px"
              v-model="ruleForm.jobTitle"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="性格特征"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.characterTraits"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="客户喜好"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              style="width: 120px"
              v-model="ruleForm.customerPreferences"
            ></el-input>
          </el-form-item>
          <el-form-item label="民族" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.nationality"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="汉族" value="汉族"></el-option>
              <el-option label="蒙古族" value="蒙古族"></el-option>
              <el-option label="回族" value="回族"></el-option>
              <el-option label="藏族" value="藏族"></el-option>
              <el-option label="维吾尔族" value="维吾尔族"></el-option>
              <el-option label="苗族" value="苗族"></el-option>
              <el-option label="壮族" value="壮族"></el-option>
              <el-option label="布依族" value="布依族"></el-option>
              <el-option label="朝鲜族" value="朝鲜族"></el-option>
              <el-option label="满族" value="满族"></el-option>
              <el-option label="彝族" value="彝族"></el-option>
              <el-option label="侗族" value="侗族"></el-option>
              <el-option label="瑶族" value="瑶族"></el-option>
              <el-option label="白族" value="白族"></el-option>
              <el-option label="土家族" value="土家族"></el-option>
              <el-option label="哈尼族" value="哈尼族"></el-option>
              <el-option label="哈萨克族" value="哈萨克族"></el-option>
              <el-option label="傣族" value="傣族"></el-option>
              <el-option label="黎族" value="黎族"></el-option>
              <el-option label="僳僳族" value="僳僳族"></el-option>
              <el-option label="佤族" value="佤族"></el-option>
              <el-option label="畲族" value="畲族"></el-option>
              <el-option label="回族" value="回族"></el-option>
              <el-option label="高山族" value="高山族"></el-option>
              <el-option label="拉祜族" value="拉祜族"></el-option>
              <el-option label="水族" value="水族"></el-option>
              <el-option label="东乡族" value="东乡族"></el-option>
              <el-option label="纳西族" value="纳西族"></el-option>
              <el-option label="景颇族" value="景颇族"></el-option>
              <el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>
              <el-option label="土族" value="土族"></el-option>
              <el-option label="达斡尔族" value="达斡尔族"></el-option>
              <el-option label="仫佬族" value="仫佬族"></el-option>
              <el-option label="羌族" value="羌族"></el-option>
              <el-option label="布朗族" value="布朗族"></el-option>
              <el-option label="撒拉族" value="撒拉族"></el-option>
              <el-option label="毛南族" value="毛南族"></el-option>
              <el-option label="仡佬族" value="仡佬族"></el-option>
              <el-option label="锡伯族" value="锡伯族"></el-option>
              <el-option label="阿昌族" value="阿昌族"></el-option>
              <el-option label="普米族" value="普米族"></el-option>
              <el-option label="塔吉克族" value="塔吉克族"></el-option>
              <el-option label="怒族" value="怒族"></el-option>
              <el-option label="乌孜别克族" value="乌孜别克族"></el-option>
              <el-option label="俄罗斯族" value="俄罗斯族"></el-option>
              <el-option label="鄂温克族" value="鄂温克族"></el-option>
              <el-option label="德昂族" value="德昂族"></el-option>
              <el-option label="保安族" value="保安族"></el-option>
              <el-option label="裕固族" value="裕固族"></el-option>
              <el-option label="京族" value="京族"></el-option>
              <el-option label="塔塔尔族" value="塔塔尔族"></el-option>
              <el-option label="独龙族" value="独龙族"></el-option>
              <el-option label="鄂伦春族" value="鄂伦春族"></el-option>
              <el-option label="赫哲族" value="赫哲族"></el-option>
              <el-option label="门巴族" value="门巴族"></el-option>
              <el-option label="珞巴族" value="珞巴族"></el-option>
              <el-option label="基诺族" value="基诺族"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="婚姻情况"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.maritalStatus"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="已婚" value="已婚"></el-option>
              <el-option label="未婚" value="未婚"></el-option>
              <el-option label="离异" value="离异"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="星座" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.constellation"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="白羊座" value="白羊座"></el-option>
              <el-option label="金牛座" value="金牛座"></el-option>
              <el-option label="双子座" value="双子座"></el-option>
              <el-option label="巨蟹座" value="巨蟹座"></el-option>
              <el-option label="狮子座" value="狮子座"></el-option>
              <el-option label="处女座" value="处女座"></el-option>
              <el-option label="天秤座" value="天秤座"></el-option>
              <el-option label="天蝎座" value="天蝎座"></el-option>
              <el-option label="射手座" value="射手座"></el-option>
              <el-option label="摩羯座" value="摩羯座"></el-option>
              <el-option label="水瓶座" value="水瓶座"></el-option>
              <el-option label="双鱼座" value="双鱼座"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生肖" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.chineseZodiac"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="子鼠" value="子鼠"></el-option>
              <el-option label="丑牛" value="丑牛"></el-option>
              <el-option label="寅虎" value="寅虎"></el-option>
              <el-option label="卯兔" value="卯兔"></el-option>
              <el-option label="辰龙" value="辰龙"></el-option>
              <el-option label="巳蛇" value="巳蛇"></el-option>
              <el-option label="午马" value="午马"></el-option>
              <el-option label="未羊" value="未羊"></el-option>
              <el-option label="申猴" value="申猴"></el-option>
              <el-option label="酉鸡" value="酉鸡"></el-option>
              <el-option label="戌狗" value="戌狗"></el-option>
              <el-option label="亥猪" value="亥猪"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item
            label="联系要求"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.contactRequest"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="无" value=""></el-option>
              <el-option
                label="不允许联系"
                value="contactNotAllowed"
              ></el-option>
              <el-option label="可以联系" value="CanBeContacted"></el-option>
              <el-option
                label="不要频繁联系"
                value="FrequentContact"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="微信" style="display: flex; margin: 0 15px 0 0">
            <el-input v-model="ruleForm.wechatId"></el-input>
          </el-form-item>
          <el-form-item
            label="通讯地址"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              type="textarea"
              :rows="1"
              style="width: 480px"
              v-model="ruleForm.mailingAddress"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="语种" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.language"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="中文" value="中文"></el-option>
              <el-option label="英文" value="英文"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="国籍" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.countryCitizenship"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="中国" value="中国"></el-option>
              <el-option label="香港" value="香港"></el-option>
              <el-option label="外国" value="外国"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="会员等级"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-select
              style="width: 120px"
              v-model="ruleForm.membershipLevel"
              placeholder="请选择活动区域"
              clearable
            >
              <el-option label="体验会员" value="1"></el-option>
              <el-option label="白银会员" value="2"></el-option>
              <el-option label="黄金会员" value="3"></el-option>
              <el-option label="黑金会员" value="4"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="籍贯" style="display: flex; margin: 0 15px 0 0">
            <el-input
              type="textarea"
              :rows="1"
              style="width: 480px"
              v-model="ruleForm.hometown"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="现居城市"
            style="display: flex; margin: 0 15px 0 0"
          >
            <el-input
              type="textarea"
              :rows="1"
              style="width: 300px"
              v-model="ruleForm.currentCity"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="血型" style="display: flex; margin: 0 15px 0 0">
            <el-select
              style="width: 120px"
              v-model="ruleForm.bloodType"
              placeholder="请选择活动区域"
              filterable
              clearable
            >
              <el-option label="未知" value="未知"></el-option>
              <el-option label="A型" value="A型"></el-option>
              <el-option label="B型" value="B型"></el-option>
              <el-option label="AB型" value="AB型"></el-option>
              <el-option label="O型" value="O型"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" style="display: flex; margin: 0 15px 0 0">
            <el-input
              type="textarea"
              :rows="1"
              style="width: 300px"
              v-model="ruleForm.modifyReason"
            ></el-input>
          </el-form-item>
        </div> -->
        <div style="margin: 30px 0 0 30%">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "message",
  // props: {
  // },
  data() {
    return {
      // 会员信息返回数据
      queryList: {
        userName: "",
        customerId: "",
        deptName: "",
        vipstatus: "",
        employeeName: "",
        integralSum: "",
        travelMoney: "",
        commodityMoney: "",
        admissionTicketNum: "",
        testNum: "",
        registerNum: "",
        consultationNum: "",
        doctorNum: "",
        money: "",
        species: "",
        useCommodityMoney: "",
        useVIPHallNum: "",
        useVIPBoardingNum: "",
        useVIPChannelNum: "",
        useFlightNum: "",
        useHotelNum: "",
        useTrainNum: "",
      },
      userCouponBOSLength: "",
      expiredCardDataList: [],
      // 注册表单
      ruleForm: {
        userName: "",
        phoneOne: "",
        certificateType: "",
        certificateNumber: "",
        certificateDate: "",
        userWechat: "",
        userSex: "",
        birthday: "",
        residence: "",
        remark: "",
        requirement: "",
      },
      dialogVisible: false,
      // 表单验证规则
      rules: {
        userName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        phoneOne: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        certificateNumber: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur",
          },
        ],
        birthday: [
          {
            required: true,
            message: "选择生日",
            trigger: "change",
          },
        ],

        certificateDate: [
          {
            required: true,
            message: "选择证件有效期",
            trigger: "change",
          },
        ],
        certificateType: [
          {
            required: true,
            message: "选择证件类型",
            trigger: "change",
          },
        ],
      },

      formLabelAlign: {
        memberNumber: "",
        memberName: "",
        phone: "",
        id: "",
        orderType: "",
        cardid: "",
        birthday: "",
        customerId: null,
        certificateNo: "",
      },
      // 工单类型
      value: "",
      mold: [
        {
          value: "ZGJMSFZ",
          label: "身份证",
        },
        {
          value: "MILITARY",
          label: "军人证",
        },
        {
          value: "HZ ",
          label: "护照",
        },
        {
          value: "GAJMLWNDTXZ",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "TWJMLWDLTXZ ",
          label: "台湾居民来往大陆通行证",
        },

        {
          value: "WGRYJJLSFZ",
          label: "外国人永久居留身份证",
        },

        {
          value: "HKB",
          label: "户口本",
        },
        {
          value: "BIRTH",
          label: "出生证明",
        },
        {
          value: "OTHER",
          label: "其他证件",
        },
      ],
      // 会员注册返回数据
      registerList: {},

      // 返回会员卡信息
      cardDataList: [],
      selectagion: "",
    };
  },
  methods: {
    // 高频用户按钮
    frequency() {
      if (this.queryList.customerId == null) {
        this.$message({
          message: "请先查询会员",
          type: "warning",
        });
      } else {
        this.$router.push({
          name: "frequencyuser",
          query: {
            customerId: this.queryList.customerId,
          },
        });
      }
    },
    // 积分按钮
    integralSubsidiary() {
      if (this.queryList.customerId == null) {
        this.$message({
          message: "请先查询会员",
          type: "warning",
        });
      } else {
        this.$router.push({
          name: "customerintegralSubsidiary",
          params: {
            customerId: this.queryList.customerId,
          },
        });
      }
    },
    // 值机订单
    checkinorder() {
      this.$router.push({
        name: "customerCheckinorder",
        params: {
          customerId: this.queryList.customerId,
        },
      });
    },
    // vip通道订单
    viporder() {
      this.$router.push({
        name: "customerViporder",
        params: {
          customerId: this.queryList.customerId,
        },
      });
    },
    // 贵宾厅订单
    hallorder() {
      this.$router.push({
        name: "customerHallorder",
        params: {
          customerId: this.queryList.customerId,
        },
      });
    },
    // 机票订单
    fightorder() {
      this.$router.push({
        name: "customerFightorder",
        params: {
          customerId: this.queryList.customerId,
        },
      });
    },
    // 酒店订单
    hotelorder() {
      this.$router.push({
        name: "customerHotelorder",
        params: {
          customerId: this.queryList.customerId,
        },
      });
    },
    // 火车票订单按钮
    trainOrder() {
      this.$router.push({
        name: "customertrainOrder",
        params: {
          phone: this.queryList.phone,
          customerId: this.queryList.customerId,
        },
      });
    },
    // 优惠卷点击按钮
    coupons() {
      this.$router.push({
        name: "couponsdetails",
        params: {
          customerId: this.queryList.customerId,
        },
      });
    },

    // 会员退卡查询按钮
    cardrefundinformation() {
      if (this.queryList.customerId == null) {
        this.$message({
          message: "请先查询会员",
          type: "warning",
        });
      } else {
        // console.log(this.queryList)
        this.$router.push({
          name: "customercardrefundinformation",
          params: {
            phone: this.queryList.phone,
          },
        });
      }
    },
    // 会员退卡查询按钮
    gophysicalExamination() {
      if (this.queryList.customerId == null) {
        this.$message({
          message: "请先查询会员",
          type: "warning",
        });
      } else {
        // console.log(this.queryList)
        this.$router.push({
          name: "physicalExamination",
          params: {
            phone: this.queryList.phone,
          },
        });
      }
    },
    // 注册确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .getqueryUserCrm({
              phone: this.ruleForm.phoneOne,
            })
            .then((res) => {
              this.closeLoading();
              console.log(res);
              if (res.code == "00000") {
                if (res.data == null) {
                  this.getregister(formName);
                } else {
                  this.$message({
                    message: "当前手机号已注册为会员。",
                    type: "warning",
                  });
                  this.dialogVisible = !this.dialogVisible;
                  this.$refs[formName].resetFields();
                }
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 点击空白处弹窗杠关闭提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getregistermethod() {
      this.ruleForm = {};
      this.dialogVisible = !this.dialogVisible;
    },
    // 会员注册接口
    getregister(formName) {
      this.$axios.crmRegistration(this.ruleForm).then((res) => {
        if (res.code == "00000") {
          this.$message({
            message: "会员注册成功",
            type: "success",
          });
          this.dialogVisible = !this.dialogVisible;
          this.$refs[formName].resetFields();
        }else{
          this.$message({
            message: "会员注册失败",
            type: "warning",
          });
        }
      });
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },

    // 会员信息查询
    getqueryCRMCustomerData() {
      console.log(this.formLabelAlign.customerId);
      if (this.formLabelAlign.customerId == null) {
        this.formLabelAlign.customerId = "";
      }
      if (
        this.formLabelAlign.phone == "" &&
        this.formLabelAlign.cardid == "" &&
        this.formLabelAlign.customerId == null &&
        this.formLabelAlign.certificateNo == ""
      ) {
        this.$message.error("请输入至少一项进行查询");
      } else {
        this.getqueryCRMCustomerDataagion();
      }
    },
    // 会员信息查询
    getqueryCRMCustomerDataagion() {
      //  console.log(Number(this.formLabelAlign.memberNumber))
      this.showLoading();
      this.$axios
        .getqueryUserCrm({
          // vipNumber: String(this.formLabelAlign.customerId),
          cardNumber: this.formLabelAlign.certificateNo,
          vipNumber: this.formLabelAlign.cardid,
          phone: this.formLabelAlign.phone,
        })
        .then((res) => {
          this.closeLoading();
          console.log(res);
          if (res.code == "00000") {
            if (res.data == null) {
              this.$message({
          message: "未查询到会员",
          type: "warning",
        });
              this.queryList ={}
            } else {
              this.queryList = res.data;
              this.cardDataList = res.data.userCardBOList;
              this.userCouponBOSLength = res.data.userCouponBOS.Length;
            }

            // console.log(this.queryList);
            // this.cardDataList = this.queryList.cardDataList;
            // console.log(this.queryList);
            // console.log(this.cardDataList);
            // this.expiredCardDataList = res.data.expiredCardDataList;
            // if (this.queryList.registerNum == 9999) {
            //   this.queryList.registerNum = "无限次";
            // }
            // if (this.queryList.consultationNum == 9999) {
            //   this.queryList.consultationNum = "无限次";
            // }
            // if (this.queryList.doctorNum == 9999) {
            //   this.queryList.doctorNum = "无限次";
            // }
            // if (this.queryList.deposit == null) {
            //   this.queryList.deposit = "0";
            // }
            // if (this.queryList.extractDeposit == null) {
            //   this.queryList.extractDeposit = "0";
            // }
            // if (this.queryList.noExtractDeposit == null) {
            //   this.queryList.noExtractDeposit = "0";
            // }
            // if (this.queryList.frozenDeposit == null) {
            //   this.queryList.frozenDeposit = "0";
            // }
            // if (res.data.customerId == null) {
            //   this.$message({
            //     message: "号码不存在",
            //   });
            // }
          } else {
            // this.$message.error("查询信息错误");
          }
        });
    },
    // 去购卡
    goPayCard() {
      this.$router.push({
        name: "purchaseCard",
        params: {
          phone: this.formLabelAlign.phone,
        },
      });
    },
    // 去退卡
    goRefundCard() {
      if (this.queryList.customerId == null) {
        this.$message({
          message: "请先查询会员",
          type: "warning",
        });
      } else {
        this.$router.push({
          name: "refundCard",
          params: {
            phone: this.formLabelAlign.phone,
          },
        });
      }
    },

    // 去工单流转
    goCirculation() {
      this.$router.push({
        name: "Workorderflow",
        params: {},
      });
    },
    // 去预定分析
    goRegister() {
      this.$router.push({
        name: "Duetoanalysis",
        params: {},
      });
    },
    // 去会员基本信息
    gocustormember() {
      if (JSON.stringify(this.queryList) === '{}') {
        this.$message({
          message: "请先查询会员",
          type: "warning",
        });
      } else {
        console.log(this.queryList);
        this.$router.push({
          name: "information",
          params: {
            customerId: this.queryList.id,
          },
        });
      }
    },
  },
  mounted() {
    this.getqueryCRMCustomerDataagion();
  },
};
</script>
<style scoped>
.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 2px;
  float: left;
}

.bgimage img {
  height: 100%;
  width: 100%;
}

.header {
  display: flex;
  font-weight: bolder;
  margin-left: 20px;
  margin-right: 50px;
  padding-top: 30px;
}

.qq {
  width: 240px;
  margin-right: 20px;
}

/* .el-form {
  display: flex;
  margin-top: 20px;
  margin-left: 10px;
} */
.el-row {
  display: flex;
  justify-content: flex-start;
  margin-left: 20px;
  margin-top: 10px;
}

.el-switch {
  margin-top: 8px;
  margin-left: 15px;
}

.zhongjain {
  width: 96%;
  height: 1px;
  background-color: rgb(190, 189, 189);
  /* margin-top: 40px; */
  margin-left: 20px;
}

.zhongjain1 {
  display: flex;
  justify-content: flex-start;
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 16px;
}

.box {
  display: flex;
  margin-left: 20px;
  border: 1px solid #e0e0e0;
  width: 96%;
}

.box1 {
  background-color: #ffffff;
  font-size: 8px;
  text-align: left;
  line-height: 15px;
}

.box2 {
  width: 1px;
  background-color: #e0e0e0;
}

.box1-1 {
  width: 100%;
  height: 21px;
  background-color: #6090ec;
  color: #ffffff;
  font-size: 8px;
  padding-top: 3px;
  /* padding-left: 10px; */
  text-align: center;
}

.lan1 {
  color: #2f80ed;
  font-weight: bolder;
  font-size: 9px;
}

.hei {
  font-weight: bolder;
  font-size: 8px;
}

.a {
  font-size: 7px;
  font-weight: bolder;
  color: #6090ec;
  margin-top: 8px;
  cursor: pointer;
}

.box1-2 {
  font-size: 7px;
  padding-left: 10px;
  padding-top: 10px;
}

.hui {
  font-size: 7px;
  padding-top: 4px;
  color: #4f4f4f;
}
.yiguoqi {
  margin-left: 20px;
  color: red;
}
</style>